<template>
  <view class="padding-bottom-button tui-skeleton">
    <l-background />
    <view class="padding-lr-30 padding-bottom-30">
      <template v-if="list.length">
        <view v-for="(item,index) in list" :key="index" class="card-bg relative margin-top-30" @click="chooseItem(item,index)">
          <view class="padding-30 flex-column relative content">
            <text class="text-40 color-primary text-bold margin-bottom-16">{{ item.bankName }}</text>
            <text class="text-24 color-t3 margin-bottom-24">{{ item.bankBranch }}</text>
            <text class="text-40 color-primary text-bold margin-bottom-24">{{ item.bankCardNumber }}</text>
            <text class="text-28 color-t3">{{ item.accountName }}</text>
          </view>
          <image class="bank-background" src="https://tbb-file.oss-cn-shenzhen.aliyuncs.com/tbb_admin_app/static/bank_background.png" />
        </view>
        <l-footer :has-more="hasMore" />
      </template>
      <template v-else>
        <tui-skeleton v-if="showSkeleton" is-loading />
        <l-no-data v-else text="暂无数据" type="data" />
      </template>
    </view>
    <tui-actionsheet :show.sync="showActionSheet" :item-list="itemList" @click="actionClick" />
    <tui-modal :show.sync="showModal" title="提示" content="是否确认删除该银行卡？" @click="modalClick" />
    <safe-area-bottom />
    <l-bottom-button text="添加银行卡" @click="jumpSave" />
  </view>
</template>

<script>
import { fetchList, delObj } from '@/common/api/user'
import { mapMutations, mapGetters } from 'vuex'
export default {
  name: 'BankCard',
  data() {
    return {
      list: [],
      current: 1,
      pageSize: 10,
      showSkeleton: true,
      hasMore: true,
      showActionSheet: false,
      showModal: false,
      item: {},
      inx: '',
      itemList: [
        { text: '修改信息' },
        { text: '删除' }
      ]
    }
  },
  onShow() {
    this.reload()
    this.setBankCardInfo(null)
  },
  onPullDownRefresh() {
    this.reload()
  },
  onReachBottom() {
    this.nextPage()
  },
  computed: {
    ...mapGetters({
      userInfo: 'userInfo',
      auth: 'auth'
    })
  },
  methods: {
    // 获取银行卡列表
    async getFetchList() {
      const [err, res] = await fetchList({
        current: this.current,
        limit: this.pageSize
      })
      this.showSkeleton = false
      uni.stopPullDownRefresh()
      if (!this.$http.errorCheck(err, res)) return false
      let list = res.data.data.records
      if (!list) list = []
      if (list.length < this.pageSize) this.hasMore = false
      if (this.page === 1) this.list = list
      else this.list.push(...list)
    },
    // 刷新
    reload() {
      this.hasMore = true
      this.page = 1
      this.getFetchList()
    },
    // 下一页
    nextPage() {
      if (this.hasMore) {
        this.page++
        this.getFetchList()
      }
    },
    // 删除银行卡
    async handleDeleteInternal() {
      const [err, res] = await delObj(this.item.id)
      if (!this.$http.errorCheck(err, res)) return false
      this.list.splice(this.inx, 1)
      this.toast('删除成功')
    },
    chooseItem(item, index) {
      this.item = item
      this.inx = index
      this.showActionSheet = true
    },
    actionClick(e) {
      this.showActionSheet = false
      const text = e.text
      switch (text) {
        case '修改信息':
          this.setBankCardInfo(this.item)
          this.jumpSave()
          break
        case '删除':
          this.showModal = true
          break
      }
    },
    modalClick(e) {
      this.showModal = false
      if (e.index) {
        this.handleDeleteInternal()
      }
    },
    jumpSave() {
      this.jump('/user/save-bank/save-bank')
    },
    ...mapMutations({
      setBankCardInfo: 'user/setBankCardInfo'
    })
  }
}
</script>

<style scoped lang="scss">
@include setMargin(bottom,24)
.card-bg {
  background: linear-gradient(to bottom, #484f59 0%, #393F47 100%);
  border-radius: 20rpx;
  overflow: hidden;
}
.content{
  z-index:5;
}
.bank-background{
  @include position(absolute, 0, 0);
  width:282rpx;
  height: 294rpx;
  z-index:1;
}
</style>
